<!---展视互动使用手册--->
<template>
    <div class="usehelp">
        <div class="use-help-search">
            <el-input
            placeholder="请输入内容"
            v-model="searchContent"
            clearable>
            </el-input>
            <el-button @click="toSearch('search')">全文搜索</el-button>
        </div>
        <!--展视互动使用手册-->
        <div class="use-help-cont" v-show="showAll">
            <div @click="showToggle()">
                <div v-if="isCollapse" class="use-help-icon" style="left:15px;"><i class="el-icon-s-unfold"></i></div>
                <div v-else class="use-help-icon"><i class="el-icon-s-fold"></i></div>
            </div>
            <div v-if="isShow" style="height:100%;">
                <div class="use-help-tree">
                    <div class="use-help-left">
                        <div class="use-tree-title">展视互动使用手册</div>
                        <el-tree
                        :data="treeData"
                        :props="defaultProps" 
                        ref="tree"
                        node-key="id" 
                        :default-expanded-keys="idArr" 
                        :highlight-current="isShowGaoliang" 
                        accordion
                        @node-click="handleNodeClick">
                            <span class="span-ellipsis" slot-scope="{ node }">
                                <span :title="node.label">{{ node.label }}</span>
                            </span>
                        </el-tree>
                    </div>
                </div>
                <div class="use-help-detail">
                    <div class="use-help-local" v-if="showLocal">
                        <span>当前位置：{{ helpMessage.location}}</span>
                    </div>
                    <div class="use-help-article" v-if="showArticle">
                        <div class="use-article-title">{{ helpMessage.title }}</div>
                        <div class="use-article-source">
                            <span>创建时间：{{ helpMessage.createTime }}</span>
                            <span>创建人：{{ helpMessage.createBy }}</span>
                            <span>最后编辑：{{ helpMessage.updateBy }} 于 {{ helpMessage.updateTime }}</span>
                        </div>
                        <div class="use-article-con" v-html="helpMessage.content"></div>
                    </div>
                </div>
            </div>

            <div v-else style="height:100%;">
                <div class="use-help-tree" style="width:65px">
                    <div class="use-help-left">
                        <div class="use-tree-title" style="display:none;">展视互动使用手册</div>
                        <el-tree style="display:none;"
                        :data="treeData"
                        :props="defaultProps" 
                        ref="tree"
                        node-key="id" 
                        :default-expanded-keys="idArr" 
                        :highlight-current="isShowGaoliang" 
                        accordion
                        @node-click="handleNodeClick">
                            <span class="span-ellipsis" slot-scope="{ node }">
                                <span :title="node.label">{{ node.label }}</span>
                            </span>
                        </el-tree>
                    </div>
                </div>
                <div class="use-help-detail" style="width: calc(100% - 65px);">
                    <div class="use-help-local" v-if="showLocal">
                        <span>当前位置：{{ helpMessage.location}}</span>
                    </div>
                    <div class="use-help-article" v-if="showArticle">
                        <div class="use-article-title">{{ helpMessage.title }}</div>
                        <div class="use-article-source">
                            <span>创建时间：{{ helpMessage.createTime }}</span>
                            <span>创建人：{{ helpMessage.createBy }}</span>
                            <span>最后编辑：{{ helpMessage.updateBy }} 于 {{ helpMessage.updateTime }}</span>
                        </div>
                        <div class="use-article-con" v-html="helpMessage.content"></div>
                    </div>
                </div>
            </div>
            
        </div>
        <!--全文搜索结果-->
        <div style="display:none;" id="searchContList"></div>
        <div class="use-help-cont" v-show="showSearch">
            <div class="use-seach">
                <div class="use-position-top"><div class="use-search-name">搜索结果</div></div>
                <div class="use-search-scroll">
                    <div class="use-search-list" v-for="(items , index) in searchList" :key="index" v-on:click="toArticle(items)">
                        <div class="use-search-lname">{{ items.title }}</div>
                        <div class="use-search-update">最后编辑日期：{{ items.updateTime }}</div>
                        <div class="use-search-con" v-html="items.content"></div>
                        <div class="use-search-local">
                            <div class="search-local-cont">位置：<span class="search-local-title">{{ items.location }}</span></div>
                        </div>
                    </div>
                </div>
                <!--分页-->
                <div class="use-position-bottom">
                    <div class="pagination">
                        <el-pagination
                            @size-change="sizeChangeHandle"
                            @current-change="currentChangeHandle"
                            :current-page="pageIndex"
                            :page-sizes="[10,20, 50]"
                            :page-size="pageSize"
                            :total="totalPage"
                            layout="total, sizes,prev, pager, next, jumper">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import bus from '../common/bus';
    import { baseUrl } from '@/utils/api';
    
    export default {
        name: 'usehelp',
        data() {
            return {
                showAll: true, //展视互动使用手册tree显示
                showSearch: false, //搜索列表页隐藏
                input: '',
                treeData: [],
                idArr:[],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                isShowGaoliang: false,
                helpMessage: {
                    location: ''
                },
                showLocal: false,
                showArticle: false,
                searchContent: '',
                searchList: {
                    location: ''
                }, //搜索查询列表
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                isShow: true, //默认显示左侧tree列表以及右侧内容
                isCollapse: false //折叠侧边栏 （默认展开）
            };
        },
        computed:{
            localArray() { //切割成一个数组，得到四个ip值,只需要通过计算属性就可以实现
                return this.helpMessage.location.split('/')
            },
        },
        created() {
            this.getTreeData();
        },
        methods: {
            //数组转化成字符串
            acTiveArrStringFun(obj) {
                var arr = [];
                if (obj != null && obj.length != 0) {
                    for (var i = 0; i < obj.length; i++) {
                        if(!obj[i]){
                            continue;
                        }
                        arr.push(obj[i]);  
                    }
                    //console.log(arr.push(obj[i])) 
                }
                return arr.join(' / ').toString();
            },
            //当前位置----->排版
            localString(){
                let localString = this.acTiveArrStringFun(this.localArray);
                this.helpMessage.location = localString;
                console.log(this.helpMessage.location)
            },
            //渲染tree数据
            //遍历树数据 添加 label属性
            dealTree(array) {
                for (var i = 0; i < array.length; i++) {
                    array[i]["label"] = array[i].title;
                    array[i]["children"] = array[i].childs;
                    if (array[i]["children"] != undefined) {
                        this.dealTree(array[i]["children"]);
                    }
                   // console.log(array[i].title);
                }
            },
            //获取tree列表数据（展视互动使用手册）
            getTreeData() {
                this.$axios.get(baseUrl + "/genseeHelp/getGenseeManualTree.do").then(
                    res => {
                        if (res.data.data.childs != undefined && res.data.data.childs != null) {
                            this.treeData = res.data.data.childs;
                            this.dealTree(this.treeData);
                        } else {
                            this.treeData = [];
                        }  
                    },
                    err => {
                        this.$message.error(err);
                    }
                );
            },
            //tree点击
            handleNodeClick(data) {
                let key = this.$refs.tree.getCurrentKey();
                this.$emit('click', key);
                this.getUseHelpInfor(data);
                //console.log(data);
            },
            //右侧
            getUseHelpInfor(data) {
                console.log(data)
                this.showLocal = true; //当前显示
                this.helpMessage = data;
                this.localString(); //当前位置转化字符串
                if (data.content != "" || data.length === 0) { //详细内容
                    this.showArticle = true; 
                }else{
                    this.showArticle = false;
                }
            },
            //循环tree匹配id(当前位置)
            forEachTree(sid, array, index){
                for (var i = 0; i < array.length; i++) {
                    array[i]["id"] = array[i].id;
                    array[i]["children"] = array[i].childs;
                    array[i]["location"] = array[i].location;
                    if (array[i]["id"] == sid) {
                        this.searchList[index].id = array[i]["id"];
                        let searchListArray = this.searchList[index].location;
                        searchListArray = array[i]["location"];
                        searchListArray = searchListArray.split('/');
                        this.searchList[index].location = this.acTiveArrStringFun(searchListArray);
                        return false; 
                    }
                    if (array[i]["children"] && array[i]['children'].length) {
                        this.forEachTree(sid , array[i]["children"], index);
                    }
                }
            },
            // 每页数
            sizeChangeHandle (val) {
                this.pageSize = val
                this.pageIndex = 1
                this.toSearch();
            },
            // 当前页
            currentChangeHandle (val) {
                this.pageIndex = val;
                this.toSearch();
            }, 
            //全文搜索
            toSearch(key){
                if (key == "search") {
                    this.pageIndex = 1;
                }
                this.getTreeData();
                let _this = this;
                if (this.searchContent == null || this.searchContent=="" || this.searchContent == "请输入内容") {
                    this.showAll = true; 
                    this.showSearch = false;
                    this.$message.error("请输入搜索内容！");
                    this.showLocal = false;
                    this.showArticle = false;
                }else{
                    let param = new URLSearchParams();
                    param.append("condition", this.searchContent); 
                    param.append("currentPage", this.pageIndex);
                    param.append("pagesize", this.pageSize);
                    this.$axios.post(baseUrl + "/genseeHelp/searchByCondition1.do" , param).then(
                    res => {
                        if (res.data.data.items.length != 0) {
                            this.showAll = false; 
                            this.showSearch = true;
                            _this.searchList = JSON.parse(JSON.stringify(res.data.data.items));
                            _this.totalPage = res.data.data.totalSize; //当前页
                            for(var i = 0; i< _this.searchList.length; i++){
                                this.forEachTree(_this.searchList[i].id, _this.treeData, i);
                                //console.log(this.searchList.location[i])
                            }
                            setTimeout(()=>{
                                //this.searchLocalString();
                                let use_search_lname = document.getElementsByClassName("use-search-lname");
                                let use_search_con = document.getElementsByClassName("use-search-con"); // 获取所有对话内容的dom节点
                                let search_local_title = document.getElementsByClassName("search-local-title");
                                let searchList = this.searchList;  //从vuex穿过来的对话内容；
                                let searchContent = this.searchContent;
                                for (let i = 0; i < searchList.length; i++) { // 遍历所有对话文本内容
                                let searchContList = document.getElementById("searchContList"); //搜索结果列表设一个空标签存储 （用于将字符串转化成html）
                                searchContList.innerHTML = searchList[i].content;
                                    if (searchContList.innerText.indexOf(searchContent) >= 0) { // 当对话内容中有包含搜索框中的字符串时
                                        var values = searchContList.innerText.split(searchContent); // 先将包含关键字的对话内容拆分为数组
                                        use_search_con[i].innerHTML = values.join( // 然后再以一段设置了css样式的标签为分隔符,将数组拼接为字符串 // 再赋值给对应的dom,让其节点的innerhtml为这个字符串
                                            '<span style="color:#f00">' + searchContent + "</span>"
                                        );                                     
                                    }
                                    if (searchList[i].title.indexOf(searchContent) >= 0) { 
                                        var values = searchList[i].title.split(searchContent); 
                                        use_search_lname[i].innerHTML = values.join( 
                                            '<strong style="color:#f00">' + searchContent + "</strong>"
                                        );                                     
                                    }
                                    if (searchList[i].location.indexOf(searchContent) >= 0) { 
                                        var values = searchList[i].location.split(searchContent); 
                                        search_local_title[i].innerHTML = values.join( 
                                            '<span style="color:#f00">' + searchContent + "</span>"
                                        );                                     
                                    }
                                }
                            },100)
                        }else{
                            this.$message.error("查询无结果");
                             _this.searchList = [];
                             _this.totalPage = 0;
                        }
                        
                    },
                    err => {
                        this.showAll = true;
                        this.showSearch = false; 
                        this.$message.error(err);
                    }
                    );
                    return;
                }    
            },
            //点击搜索列表跳转
            toArticle(items) {
                this.showAll = true;
                this.showSearch = false;
                this.showLocal = true;
                this.showArticle = true;
                setTimeout(()=>{
                    this.helpMessage = items;
                    this.localString(); //当前位置转化
                    // 使树筛选时选中的节点高亮显示
                    this.isShowGaoliang = true;
                    this.$refs.tree.setCurrentKey(items.id);
                    this.treeData.forEach(m=>{
                        this.idArr.push(items.id)
                    })
                })
                console.log(items.id)
                console.log(items)
            },
            //左侧列表折叠
            showToggle(){
                this.isCollapse = !this.isCollapse;
                this.isShow = !this.isShow;
                this.isShowGaoliang = true; //选中的节点高亮显示
            }
            
        }
  };
</script>

<style scoped>
.usehelp{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #f0f0f0;
    padding: 10px;
}
.use-help-search{
    width: 100%;
    height: 74px;
    padding: 20px 30px;
    box-sizing: border-box;
    background: #fff;
}
.el-form-item{
    width: 34%;
    margin-right: 10px;
    float: left;
}
.el-input{
    width: 34%;
    margin-right: 10px;
}
.use-help-cont{
    padding: 10px 0;
    width: 100%;
    /* height: 100%; */
    height: calc(100% - 54px);
    box-sizing:border-box;
    position: relative;
}
/*展视互动使用手册*/
.use-help-tree{
    /* width: 65px; */
    width: 350px;
    height: 100%;
    float: left;
    padding-right: 10px;
    box-sizing: border-box;
}
.use-help-icon{
    position: absolute;
    left: 302px;
    top: 15px;
    font-size: 28px;
    color: #555;
    cursor: pointer;

}
.use-help-left{
    width: 100%;
    height: 100%;
    background: #fff;
}
.use-tree-title{
    height: 36px;
    font-size: 18px;
    font-weight: bold;
    line-height: 36px;
    padding:10px 0 0 20px;
}
.el-tree{
    height: calc(100% - 46px);
    padding: 5px 20px;
    font-size: 16px;
    overflow-y:auto;
    overflow-x:hidden;
    box-sizing: border-box;
}
.use-help-detail{
    /* width: 76%; */
    width: calc(100% - 350px);
    height: 100%;
    float: left;
    background: #fff;
    padding: 10px 0 10px 20px;
    box-sizing: border-box;
}
.use-help-local{
    margin-right: 20px;
    height: 35px;
    border-bottom: 1px solid #f0f0f0;
}
.use-help-local span{
    float: left;
    display: inline-flex;
    font-size: 14px;
    line-height: 32px;
}
.el-breadcrumb{
    float: left;
    line-height: 32px;
}
.use-help-article{
    padding: 20px 0;
    height: calc(100% - 36px);
}
.use-article-title{
    line-height: 32px;
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 15px;
}
.use-article-source{
    line-height: 24px;
    color: #aaa;
    font-size: 14px;
    padding-bottom: 20px;
}
.use-article-source span{
    display: inline-block;
    padding-right: 60px;
    color: #aaa;
}
.use-article-con{
    height: calc(100% - 100px);
    overflow-x: hidden;
    overflow-y: scroll;
    padding:0 15px 20px 0;
    box-sizing: border-box;
    line-height: 26px;
}
.use-article-con p{
    line-height: 24px;
    text-indent: 32px; 
}
.use-article-con p img{
    width: 80%;
}
/*全文搜索*/
.use-seach{
    background: #fff;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    box-sizing: border-box;
}
.use-position-top{
    position: fixed;
    left: 0;
    top: 94px;
    width: 100%;
    box-sizing: border-box;
    z-index: 222;
    padding: 0 27px 0 10px;
}
.use-search-name{
    font-size: 14px;
    font-weight: bold;
    padding:15px 20px; 
    background: #fff;
}
.use-search-scroll{
    padding: 49px 0 132px;
    box-sizing: border-box;
}
.use-search-list{
    padding: 5px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    position: relative;
}
.use-search-list:hover{
    background: #ecf5ff;
}
.use-position-bottom{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 222;
    padding: 0 27px 0 10px;
}
.pagination{
    background: #fff;
    margin: 0;
    padding:20px 10px 20px 0;
}
.use-search-lname{
    font-size: 16px;
    line-height: 32px;
    font-weight: bold;
}
.use-search-lname strong{
    color: #D9001B;
}
.use-search-update{
    position: absolute;
    right: 20px;
    top: 5px;
    line-height: 32px;
    font-size: 12px;
    font-weight: normal;
    color: #aaa;
}
.use-search-con{
    margin: 5px 0 10px;
    height: 24px;
    line-height: 24px;
    font-size: 15px;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    
}
.use-search-lname span{
    color: #D9001B;
}
.use-search-local{
    line-height: 22px;
    height: 22px;
}
.use-search-local .search-local-cont{
    float: left;
    display: inline-flex;
    font-size: 12px;
    color: #aaa;
}
.use-search-local .search-local-cont span{
    color: #aaa;
}
.use-search-local .search-local-cont span strong{
    font-weight: normal;
}
.use-search-local .el-breadcrumb{
    float: left;
    line-height: 22px;
    font-size: 12px;
}
/* ::-webkit-scrollbar {
    width: 0 !important;
}
::-webkit-scrollbar {
    width: 0 !important;height: 0;
} */
</style>
